<template>
  <el-carousel indicator-position="outside" style="height: 500px;">
    <el-carousel-item style="height: 500px;">
      <img src="../../assets/img/lunbo.png">
    </el-carousel-item>
    <el-carousel-item style="height: 500px;" >
      <img src="../../assets/img/lunbo.png">
    </el-carousel-item>
    <el-carousel-item style="height: 500px;" >
      <img src="../../assets/img/lunbo.png">
    </el-carousel-item>
  </el-carousel>
</template>

<script>
    export default {
      name: 'carousel'
    }
</script>
<style>
  .el-carousel__container{
    height: 500px !important;
  }
  .el-carousel__indicator{
    width: 0 !important;
    height: 0 !important;
    padding: 0  !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50%;
    background: #fff !important;
    border: 1px solid  rgba(43,48,64,0.4);
    margin-left: 15px;
  }
  .el-carousel__indicator.is-active{
    /*background: #999 !important;*/
    width: 14px !important;
    height: 14px !important;
    background: rgba(43,48,64,0.4) !important;
    border: none;
  }
  .el-carousel__indicators--outside{
    position: absolute  !important;
    bottom: 15px;
  }
  .el-carousel__button{
    width: 0 !important;
    height: 0 !important;
  }
  img{
    margin-top: 0px;
  }
</style>
<style scoped>

</style>
